<template>
  <div
    ref="chartContainer"
    :class="className"
    :style="{ height: height, width: width }"
  ></div>
</template>

<script setup>
import * as echarts from "echarts";

const { proxy } = getCurrentInstance();

const props = defineProps({
  className: {
    type: String,
    default: "chart",
  },
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "350px",
  },
  autoResize: {
    type: Boolean,
    default: true,
  },
  data: {
    type: Array,
    required: true,
  },
});

const chartRef = ref(null);

onMounted(() => {
  initChart();
  if (props.autoResize) {
    window.addEventListener("resize", resizeChart);
  }
});

onBeforeUnmount(() => {
  if (props.autoResize && chartRef.value) {
    window.removeEventListener("resize", resizeChart);
  }
  disposeChart();
});

watch(
  () => props.data,
  (newVal) => {
    if (chartRef.value) {
      updateChartData(newVal);
    }
  },
  { deep: true }
);

function initChart() {
  if (proxy.$refs.chartContainer) {
    chartRef.value = echarts.init(proxy.$refs.chartContainer, "macarons");
    updateChartData(props.data);
  }
}

function updateChartData(data) {
  setOptions(processChartData(data));
}

function processChartData(data) {
  // 初始化结果结构
  let result = { name: [], value: [] };

  // 填充结果结构
  data.forEach((item) => {
    result.name.push(item.name);
    result.value.push(item.value);
  });

  // 对日期进行排序，并根据排序的索引重新排列 value 数组
  let sortedIndices = result.name
    .map((item, index) => ({ item, index }))
    .sort((a, b) => new Date(a.item) - new Date(b.item))
    .map((data) => data.index);

  // 根据排序后的索引创建新的 name 和 value 数组
  let sortedCreateTime = sortedIndices.map((index) => result.name[index]);
  let sortedCount = sortedIndices.map((index) => result.value[index]);

  return { name: sortedCreateTime, value: sortedCount };
}

function setOptions(data) {
  if (!chartRef.value) return;
  chartRef.value.setOption({
    title: {
      text: "统计信息",
      left: "center",
    },
    xAxis: {
      data: data.name,
      boundaryGap: false,
      axisTick: {
        show: true,
      },
      type: "category",
    },
    grid: {
      left: 10,
      right: 10,
      bottom: 20,
      top: 30,
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
      padding: [0, 10],
    },
    yAxis: {
      axisTick: {
        show: false,
      },
      type: "value",
      interval: 1,
    },
    series: [
      {
        smooth: true,
        type: "line",
        itemStyle: {
          color: "#3888fa",
          areaStyle: {
            color: "#f3f8ff",
          },
        },
        lineStyle: {
          color: "#3888fa",
          width: 2,
        },
        data: data.value,
        animationDuration: 2800,
        animationEasing: "quadraticOut",
      },
    ],
  });
}

function resizeChart() {
  if (chartRef.value) {
    chartRef.value.resize();
  }
}

function disposeChart() {
  if (chartRef.value) {
    chartRef.value.dispose();
    chartRef.value = null;
  }
}
</script>
